<template>
	<view class="body">
		<u-navbar title="流程处理"></u-navbar>
		<view class="tabs-bg">
			<u-tabs bg-color="#EDEDED" active-color="#1BA6FC" inactive-color="#A8A8A8" :list="list" :is-scroll="false"
				:current="current" @change="change"></u-tabs>
		</view>
		<view class="page-body">
			<view v-show="current==0" class="time-line">
				<u-time-line>
					<u-time-line-item :key='flow.taskId' v-for=" flow in flowRecordList">
						<template v-slot:node>
							<u-icon name="pushpin-fill" color="#ddd" :size="24"></u-icon>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">
									{{ flow.taskName }}
								</view>
								<view v-if="flow.candidate" class="u-order-time">
									候选办理：{{ flow.candidate }}
								</view>
								<view v-if="flow.assigneeName" class="u-order-time">
									办理人：{{ flow.assigneeName }}
								</view>
								<view class="u-order-time">
									接收时间：{{ flow.createTime }}
								</view>
								<view v-if="flow.finishTime" class="u-order-time">
									办理时间：{{ flow.finishTime }}
								</view>
								<view v-if="flow.duration" class="u-order-time">
									耗时:{{ flow.duration }}
								</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
			<view v-if="current==1">
				<image :src="diagramImgUrl" mode="aspectFit"></image>
			</view>
		</view>
		<view class="btn-body u-flex">
			<view class="u-flex-3" @click="toDetailView">
				<view class="btn btn-plain">
					<u-icon label="详情" size="32" label-color="#3D3D3D" label-size="32.61" name="/static/tduck/2.png">
					</u-icon>
				</view>
			</view>
		</view>
		<operate ref="operate" :task-form='taskForm' @back="handleBackRef" />
	</view>
</template>

<script>
	import operate from './operate.vue'

	export default {
		components: {
			operate
		},
		data() {
			return {
				taskForm: {
					instanceId: "", // 流程实例编号
					deployId: "", // 流程定义编号
					taskId: "", // 流程任务编号
					procDefId: "", // 流程编号
					formDataId: "" // 数据id
				},
				diagramImgUrl: '',
				wvUrl: '',
				flowRecordList: [],
				list: [{
					name: '流转信息'
				}, {
					name: '流程图',
				}],
				current: 0,
				// 表单数据
				formResult: {}
			}
		},
		onLoad(options) {
			this.taskForm.instanceId = options.instanceId
			this.taskForm.taskId = options.taskId
			this.taskForm.deployId = options.deployId
			this.diagramImgUrl =
				`${this.$u.api.getBaseUrl()}/process/task/diagram/${options.instanceId}?Authorization=Bearer ` + this
				.vuex_token
			// 流转记录
			this.$u.api.workflow.getProcessTaskFlowRecord({
				procInsId: this.taskForm.instanceId,
				deployId: this.taskForm.deployId
			}).then(res => {
				this.flowRecordList = res.flowList
			})
			// 表单数据
			this.$u.api.workflow.getBusinessProcessForm({
				taskId: this.taskForm.taskId,
				instanceId: this.taskForm.instanceId
			}).then(res => {
				this.formResult = res
				this.taskForm.formDataId = res.data.id
			})
		},
		methods: {
			change(index) {
				this.current = index;
			},
			toDetailView() {
				let params = JSON.stringify({
					taskId: this.taskForm.taskId,
					instanceId: this.taskForm.instanceId,
					token: this.vuex_token
				})
				this.wvUrl = this.$u.api.getWebBaseUrl() + `/project/workflow/form/data`
				uni.navigateTo({
					url: `/pages/common/webview?url=${this.wvUrl}&params=${params}`
				})
			},
			/**
			 * 返回刷新
			 */
			handleBackRef() {
				uni.$emit('refreshData', 0)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.body {
		background: #EDEDED;
	}

	.tabs-bg {
		height: 96.01rpx;
	}

	.page-body {
		height: 74vh;
		border-radius: 14.49rpx 14.49rpx 0 0;
		background-color: white;
	}

	.btn-body {
		padding: 0 27.17rpx;
		background-color: white;
	}

	.btn {
		width: 152.17rpx;
		height: 65.22rpx;
		line-height: 65.22rpx;
		text-align: center;
		font-size: 32.61rpx;
		border: 1.81rpx solid #B9B9B9;
		border-radius: 9.06rpx;
		color: #000000;
		margin: 0 auto;
	}

	.btn-primary {
		color: white;
		background-color: #0256FF;
		border-color: #0256FF;
	}

	.btn-plain{
		border-color: white;
		padding-top: 4rpx;
	}

	.time-line {
		padding: 40rpx;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 28rpx;
	}


	.u-order-time {
		color: #303133;
		font-size: 26rpx;
	}
</style>
